<template>
  <div id="Servicedetails">
    <div>
      <group class="write-num">
        <x-input :max="16"  v-model="makeNum" placeholder="请输入生产码" @on-focus="searchShow=true" @on-blur="searchFun"></x-input>
      </group>
    </div>
    <div v-show="!searchShow">
      <group label-width="5.5em">
        <!--<popup-picker title="规　　格" placeholder="请选择" :data="guigeList" v-model="size" value-text-align="left"></popup-picker>-->
        <x-input title="规　　格" disabled v-model="itemMsg.specifications_model"></x-input>
      </group>

      <group label-width="5.5em">
        <!--<popup-picker title="规　　格" placeholder="请选择" :data="guigeList" v-model="size" value-text-align="left"></popup-picker>-->
        <x-input title="生<b>&nbsp;</b> 产<b>&nbsp;</b> 码" disabled v-model="itemMsg.product_code"></x-input>
      </group>
      <group label-width="5.5em">
        <!--<datetime title="生产日期" v-model="makeTime" value-text-align="left"></datetime>-->
        <x-input title="生产日期" disabled v-model="itemMsg.product_time"></x-input>
      </group>
      <group label-width="5.5em">
        <!--<datetime title="生产日期" v-model="makeTime" value-text-align="left"></datetime>-->
        <x-input title="使用月数" disabled v-model="itemMsg.use_month"></x-input>
      </group>
      <group label-width="5.5em">
        <!--<popup-picker title="保修类别" placeholder="请选择" :data="guigeList" v-model="size" value-text-align="left"></popup-picker>-->
        <x-input title="保修类别" disabled v-model="itemMsg.guarantee_category"></x-input>
      </group>
      <group class="speed">
        <cell title="问题描述（必选，可多选）" @click.native="showDig" is-link>
        </cell>
      </group>
      <group class="wa-sel">
        <checker
          v-model="problem"
          type="checkbox"
          default-item-class="problem-item"
          selected-item-class="problem-item-selected"
          style="padding: 15px 15px 0px;margin-right: -10px"
        >
          <checker-item style="margin-bottom: 6px" v-for="(i,v) in problemList" :key="v" :value="i">{{i}}</checker-item>
        </checker>
        <x-textarea v-model="custText" placeholder="问题描述（选填)" :show-counter="false" :rows="3" :onKeypress="checkFun()"></x-textarea>
      </group>
      <x-button type="primary" style="margin: 30px auto 0" action-type="button" @click.native="listSubmit">提交</x-button>

    </div>

    <div v-transfer-dom>
      <x-dialog v-model="showToast" hide-on-blur class="dialog-box" :dialog-style="{'overflow': 'visible', 'border-radius': '8px','max-width':'600px'}">
        <div>
          <h3 class="dialog-title">问题描述（必选）</h3>
          <checker
            v-model="problem"
            type="checkbox"
            default-item-class="problem-item"
            selected-item-class="problem-item-selected"
            style="padding: 5px 10px 30px 30px"
          >
            <checker-item style="margin-bottom: 6px" v-for="(i,v) in problemList" :key="v" :value="i">{{i}}</checker-item>
          </checker>
        </div>
        <div @click="showToast=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
    <div v-transfer-dom>
      <alert v-model="submitAlert" @on-hide="codeNext"  :content="submitAlertMsg"></alert>
    </div>
  </div>
</template>

<script>
  import {  Cell , Group,GroupTitle,XInput,Datetime,PopupPicker,XDialog, Checker, CheckerItem,XTextarea,XButton,XSwitch,TransferDomDirective as TransferDom,cookie, AlertModule,Alert } from 'vux'
  import { sorts,sign } from '../../aes/make';
  import { Decrypt} from '../../aes/aes';
  import { getBatteryModel,getCustQuestions,upCustomerStatus } from '../../mock/api';
  export default {
    name: "service-write",
    directives: {
      TransferDom
    },
    components: {
      Group,
      Cell,
      GroupTitle,
      XInput,
      Datetime,
      PopupPicker,
      XDialog,
      Checker,
      CheckerItem,
      XTextarea,
      XButton,
      XSwitch,
      AlertModule,
      Alert
    },
    data(){
      return{
        id:8,
        searchShow:true,
        itemMsg:{},
        makeNum:'',
        problem: [],
        problemJson:{},
        problemList:[],
        showToast:false,
        custText:'',
        submitAlert:false,
        submitAlertMsg:'',
        code:0,
        subSatus:0,
      }
    },
    computed:{

    },
    created () {
      let vue = this
      vue.updateTitle('申请售后');
      vue.updateGreenRightNum(0);
    },
    mounted(){
    },
    methods: {
      checkFun(){
        if(/[" '/~`<>%)(&*+]/.test(this.custText)){
          this.custText=this.custText.replace(/[" '/~`<>%;)(&*+]/,"")
        }
      },
      doShowToast () {
        this.$vux.toast.show({
          text: 'toast'
        })
      },
      showDig(){
        this.getCustFun();
        this.showToast=true;
      },
      searchFun(value,$event){
        if(value.length!=16){
          this.submitAlertMsg='生产码不足16位，请重新输入';
          this.submitAlert=true;
        }else{
          var so=sorts();
          var uid=cookie.get('uid');
          var access_token=cookie.get('access_token');
          var json={
            batteryStr:this.makeNum,
            sorts:so,
            uid:uid,
            access_token:access_token
          }
          var si=sign(json);
          json['sign']=si;
          if(this.page==1){
            this.allList=[];
          }
          getBatteryModel(json).then((res)=>{
            if(res.code==40013){
              vue.$router.push({name: 'login', params: {}});
              return false;
            }else{
              if(res.code==2000){
                var jm=Decrypt(res.data);
                jm=JSON.parse(jm);
                // var jm=res.data;
                this.id=jm.id;
                this.itemMsg=jm;
                console.log(jm)
                this.searchShow=false;
              }else{
                this.submitAlertMsg=res.message;
                this.submitAlert=true;
              }
            }

          })
        }

      },
      getCustFun(){
        this.problemList=[];
        var so = sorts();
        var uid = cookie.get('uid');
        var access_token = cookie.get('access_token');
        var json = {
          sorts: so,
          uid: uid,
          access_token: access_token
        }
        var si = sign(json);
        json['sign'] = si;
        getCustQuestions(json).then((res) => {
          if(res.code==40013){
            vue.$router.push({name: 'login', params: {}});
            return false;
          }
          if(res.code==2000){
            var jm=Decrypt(res.data);
            jm=JSON.parse(jm);
            // var jm=res.data;
            for(var j in jm){
              this.problemList.push(jm[j]['question']);
              this.problemJson[jm[j]['id']]=jm[j]['question'];
            }
          }
        })
      },
      listSubmit(){
        if(this.subSatus==1){
          return false;
        }else{
          this.subSatus=1;
          this.problemId='';
          if(this.problem==''){
            this.submitAlertMsg='请选择问题描述';
            this.submitAlert=true;
            return false;
          }
          for(var i in this.problem){
            for(var j in this.problemJson){
              if(this.problemJson[j]==this.problem[i]){
                this.problemId+=','+j;
              }
            }
          }
          this.problemId=this.problemId.slice(1);
          var so = sorts();
          var uid = cookie.get('uid');
          var access_token = cookie.get('access_token');
          var json = {
            status:1,
            customerModelId: this.id,
            customerQuestionId: this.problemId,
            customerDetails:this.custText,
            sorts: so,
            uid: uid,
            access_token: access_token
          }
          var si = sign(json);
          json['sign'] = si;
          upCustomerStatus(json).then((res) => {
            if(res.code==40013){
              vue.$router.push({name: 'login', params: {}});
              return false;
            }else{
              this.code=0;
              if(res.code==2000){
                var jm=Decrypt(res.data);
                jm=JSON.parse(jm);
                this.code=2000;
                this.id=jm;
                this.submitAlertMsg=res.message;
              }else {
                this.submitAlertMsg=res.message+'<br>请致电：010-58858068';
              }
              this.submitAlert=true;
              this.subSatus=0;
            }
          })
        }
      },
      codeNext(){
        if(this.code==2000){
          this.$router.push({path: 'details/'+this.id+'',query:{'next':true}});
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~vux/src/styles/close';
  @hong:#cf0808;
  @blue:#1babe3;
  @green:#51ac33;

  .slo{
    color: @green;
    margin-right: 10px;
  }
  .wa-sel{
    .problem-item {
      display: none;
      margin-right: 10px;
      padding:6px  22px;
      border: 0px;
      background:#F5F5F5 url("../../assets/images/quxiao.png") no-repeat;
      background-size:14px 14px;
      color: #646464;
      font-size: 14px;
    }
    .problem-item-selected {
      display: inline-block;
      width: 78px;
      text-align: center;
      padding:6px  0px;
    }
  }

  .dialog-box {
    .weui-dialog{
      border-radius: 8px;
      padding-bottom: 8px;
    }
    .dialog-title {
      line-height: 25px;
      text-align: left;
      padding: 8px 20px;
      font-size:15px;
      border-bottom: 1px solid #D9D9D9;
      color: #333;
    }
    .img-box {
      height: 350px;
      overflow: hidden;
    }
    .vux-close {
      position: absolute;
      bottom: -20px;
      left: 50%;
      margin-left: -20px;
      display: block;
      width: 40px;
      height: 40px;
      background:url("../../assets/images/xuanzhong.png") no-repeat;
      background-size: 40px 40px;
    }
    .vux-close:before, .vux-close:after{
      width:0px;
      height: 0px;
    }
    .problem-item {
      display: block;
      width: 90%;
      height: 35px;
      line-height: 35px;
      text-align: left;
      border: 0px;
      background: #ffffff url(../../assets/images/no-sel.png) no-repeat right;
      background-size:14px 14px;
      color: #646464;
      font-size: 14px;
    }
    .problem-item-selected {
      display: block;
      background: #ffffff url(../../assets/images/yes-sel.png) no-repeat right;
      background-size:14px 14px;
    }
  }
</style>
